Web 파일 구성
html은 사람에서 뼈대를 만들어주는 과정이라고 보시면된다.
css는 그 뼈대위에 옷, 피부색 등을 더해서 조금 더 이쁘게 만들어 주는 과정이다.JavaScript는 움직이는 동작을 만들어 줍니다.
조금 더 쉽게 설명을해보면,
HTML로 제목, 문단,표를 구성하고
CSS는 폰트, 색상, 배경색 등을 구성한다.
그리고 JavaScript로 움직이는 화면, 팝업 화면 등을 구현하게 된다.
HTML (Hypertext Markup Language ,하이퍼텍스트 마크업 언어)
웹 브라우저에서 문서 및 웹 페이지가 표시되는 방법을 규정하는 언어이며,
어떠한 웹사이트에서든 블록(block)을 구성하는 데 사용되는 언어이기도 한다.
HTML을 이용하면, 웹사이트의 구조를 만들 수 있다.
- HTML에 대한 내용을 기본적으로 이해하고 있다면,
웹사이트에 대한 제어와 유연성을 크게 높일 수 있다.
- HTML 코드에 대한 지식을 갖고 있다면, 사용자가 직접 변경할 수 있다.
- 웹 개발을 도와주는 플랫폼들은 웹사이트 디자인에서 필요한 복잡한 기능들은 자동으로
구현하는 경우가 많기 때문에, 일부 사소한 변경사항은 사용자가 HTML을 활용해서 직접 처리할 수 있다.
CSS(Cascading Style Sheets, 캐스케이딩 스타일 시트)
HTML로 만들어진 문서의 (컬러, 폰트 스타일, 레이아웃, 반응형 특징 등의) 스타일을 지정하는
방식을 규정하는 유명한 스타일 시트 언어이다.
CSS는 웹사이트를 시각적으로 보다 매력적으로 만드는 기능을 제공한다.
- 웹 페이지에 있는 일부 텍스트의 색상을 변경하고 싶다면,
기초적인 CSS만으로도 기존의 웹 페이지에 구현되어 있는 HTML 코드에 “스타일” 코드를 추가해서 원하는 작업을 처리할 수 있다.
- HTML로 표시된 내용에 더해서 CSS를 사용하면,
웹사이트의 레이아웃과 포맷을 변경할 수 있다.
- CSS의 기본에 대해서 알고 나면,
웹사이트의 모습은 물론이고 기존의 디자인에 적용된 모든 HTML을 개선할 수 있을 것이다.
자바스크립트(JavaScript)
웹사이트가 로딩된 이후에 CSS와 HTML 구성요소들을 변경할 수 있게 해주며,
이를 통해서 웹사이트를 보다 인터랙티브(interactive)하게 만들고 사용자의 참여율도 높일 수 있다.
자바스크립트를 이용해서 할 수 있는 작업의 종류에는 사실상 제한이 없습니다.
?- 웹사이트에 계산기를 만든다
- 다양한 키보드 단축키를 만들어서,
사용자들이 다른 페이지로 쉽게 이동할 수 있게 한다
- 사용자가 페이지에서 스크롤을 내리면 애니메이션을 실행한다.
자바스크립트를 이용하면 HTML과 CSS 구성요소들을 변경할 수 있기 때문에,
HTML과 CSS 언어를 배우는 데에도 유용한 도구가 될 수도 있다.
참고로 html, css, JavaScript 는 Visual Studio Code를 편집기로 사용한다.
